<script>
import * as api from '@/api/organization'

export default {
  name: 'Organization',
  data() {
    return {
      currentRow: '',
      refreshLoading: false,
      queryForm: {
        name: '',
        department: '',
        pageNum: 1,
        pageSize: 20,
      },
      dateRange: [],
      treeData: [],
      userList: [],
      statusActivate: {
        1: '在职',
        2: '在职',
        4: '在职',
        5: '不在职',
        6: '不在职'
      },
      total: 0,
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      loading: false,
      multipleSelection: [],
    }
  },
  created() {
    this.getTree()
    this.getListFn()
  },
  methods: {
    getTree() {
      this.refreshLoading = true
      api.getTree().then(({ data }) => {
        this.refreshLoading = false
        this.treeData = this.handleTree(data)
      })
      this.refreshLoading = false
    },
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListFn()
    },
    getListFn() {
      this.loading = true
      api.getList(this.queryForm).then(({ rows, total }) => {
        this.userList = rows
        this.total = +total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    handleNodeClick(data) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = 20
      this.queryForm.department = data.id == 1 ? '' : data.id
      this.getListFn()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    syncUser() {
      // const loading = this.$loading({
      //   lock: false,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // })
      api.syncUser().then(() => {
        this.$message.success('操作成功')
        this.getListFn()
      })
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    refreshFn() {
      this.getTree()
    },
    rowStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '姓名') {
        return 'color:blue'
      }
    }
  }
}
</script>

<template>
  <el-row class="organizagtion-bg">
    <!--部门数据-->
    <el-col :xs="8" :sm="6" :md="6" :lg="6" class="tree-container">
      <el-tree class="left-tree" :data="treeData" :props="defaultProps" :expand-on-click-node="false" ref="tree" highlight-current default-expand-all @node-click="handleNodeClick">
        <div class="custom-tree-node" slot-scope="{ node}">
          <span>{{ node.label }}</span>
        </div>
      </el-tree>
      <div class="refresh-btn">
        <el-button type="text" style="color:red" icon="el-icon-refresh" :loading="refreshLoading" @click="refreshFn">刷新</el-button>
      </div>
    </el-col>
    <!--用户数据-->
    <el-col :xs="16" :sm="18" :md="18" :lg="18" class="table-container">
      <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="100px">
        <div class="Button" style="display: flex; justify-content: space-between;">
          <el-form-item prop="title" style="padding-left: 0;">
            <el-input v-model="queryForm.name" placeholder="搜索员工姓名" clearable suffix-icon="el-icon-search" @change="handleQuery()" />
          </el-form-item>
          <el-form-item style="padding-right: 0;">
            <div class="ar mb15">
              <span style="font-size: 12px; padding-right: 15px; color: rgb(164, 162, 162);">同步成员需要较长时间，请耐心等待</span>
              <el-button v-hasPermi="['contacts:organization:sync']" type="primary" @click="syncUser">同步成员</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"  :cell-style="rowStyle" style="height: calc(100% - 108px); overflow-y: scroll;">
        <el-table-column type="index" label="序号" align="center"  @current-change="handleCurrentChange" :width="60"></el-table-column>
        <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="手机号" align="center" prop="mobile" />
        <el-table-column label="邮箱" align="center" prop="email" />
        <el-table-column label="企业ID" align="center" prop="userId" />
        <el-table-column label="状态" align="center" prop="isActivate">
          <template slot-scope="scope">{{ statusActivate[scope.row.isActivate] }}</template>
        </el-table-column>
      </el-table>
      <NormalPagination v-if="total > 0" :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" :pagerCount="5" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.organizagtion-bg{
  height: 100%;
  background-color: white;
  padding: 20px;
  overflow-x: scroll;
  .tree-container{
    height: 100%;
    overflow-y: scroll;
    position: relative;
    .custom-tree-node {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-right: 8px;
    }
    .refresh-btn{
      position: absolute;
      right: 10px;
      top: 0;
    }
    border-right: 10px solid #eee;
  }
  .table-container{
    height: 100%;
    padding-left: 20px;
  }
}
</style>
